<template>
  <div class="bottomButtonContainer" :class="{ outline: !this.enable }">
    <div class="btn" :style="getBtnStyle" @click="clickBtn">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../../assets/js/flexible.js";

export default {
  name: "BottomButton",
  props: {
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    enableProp: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      enable: true,
      deviceType: 1,
    };
  },
  created() {
    console.log("BottomButton: created");
  },
  mounted() {
    console.log("BottomButton: mounted");
    this.enable = this.enableProp;
    this.deviceType = screenType;
  },
  watch: {
    enableProp(newVal) {
      this.enable = newVal;
    },
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
  },
  computed: {
    getBtnStyle() {
      return getSingleButtonStyle(this.deviceType);
    },
  },
  methods: {
    clickBtn() {
      this.$emit("clickButton");
    },
  },
};
</script>
<style scoped>
.bottomButtonContainer {
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottomButtonContainer .btn {
  height: 100%;
  border-radius: 20px;
  background: var(--current-second-btn-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
